<template>
  <div class="resultYear">
    <el-scrollbar class="stdUnitScrollbarDiv" style="height:680px;">
      <el-form ref="aFinanceBaseFrom" :model="data" :rules="rules" @submit.native.prevent>

        <from-input class-label="二氧化碳1" class-label-unit="公吨CO2e" class-name="carbonDioxideOne" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.carbonDioxideOne"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="甲烷1" class-label-unit="公吨CO2e" class-name="methaneOne" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.methaneOne"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="一氧化二氮1" class-label-unit="公吨CO2e" class-name="nitrousOxideOne" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.nitrousOxideOne"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="全氟化碳1" class-label-unit="公吨CO2e" class-name="perfluorocarbonsOne" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.perfluorocarbonsOne"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="氢氟碳化物1" class-label-unit="公吨CO2e" class-name="hydrofluorocarbonsOne" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.hydrofluorocarbonsOne"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="六氟化硫1" class-label-unit="公吨CO2e" class-name="sulfurHexafluorideOne" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.sulfurHexafluorideOne"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="三氟化氮1" class-label-unit="公吨CO2e" class-name="nitrogenTrifluorideOne" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.nitrogenTrifluorideOne"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="二氧化碳2" class-label-unit="公吨" class-name="carbonDioxideTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.carbonDioxideTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="甲烷2" class-label-unit="公吨" class-name="methaneTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.methaneTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="一氧化二氮2" class-label-unit="公吨" class-name="nitrousOxideTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.nitrousOxideTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="全氟化碳2" class-label-unit="公吨" class-name="perfluorocarbonsTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.perfluorocarbonsTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="氢氟碳化物2" class-label-unit="公吨" class-name="hydrofluorocarbonsTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.hydrofluorocarbonsTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="六氟化硫2" class-label-unit="公吨" class-name="sulfurHexafluorideTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.sulfurHexafluorideTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="三氟化氮2" class-label-unit="公吨" class-name="nitrogenTrifluorideTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.nitrogenTrifluorideTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>


        <from-input class-label="现场燃烧" class-label-unit="吨CO2e" class-name="combustion" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.combustion"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="现场车辆" class-label-unit="吨CO2e" class-name="vehicles" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.vehicles"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="过程和逸散性排放" class-label-unit="吨CO2e" class-name="fugitiveEmissions" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.fugitiveEmissions"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="入厂物流" class-label-unit="吨CO2e" class-name="inboundLogistics" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.inboundLogistics"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="出场物流" class-label-unit="吨CO2e" class-name="outboundLogistics" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.outboundLogistics"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="差旅" class-label-unit="吨CO2e" class-name="businessTravel" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.businessTravel"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="电力(活动)" class-label-unit="吨CO2e" class-name="electricity" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.electricity"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="热力(活动)" class-label-unit="吨CO2e" class-name="heat" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.heat"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="蒸汽(活动)" class-label-unit="吨CO2e" class-name="steam" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.steam"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="冷力(活动)" class-label-unit="吨CO2e" class-name="cooling" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.cooling"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="燃料(能源)" class-label-unit="MWh" class-name="fuel" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.fuel"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="电力(能源)" class-label-unit="MWh" class-name="electricityTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.electricityTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="热力(能源)" class-label-unit="MWh" class-name="heatTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.heatTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="蒸汽(能源)" class-label-unit="MWh" class-name="steamTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.steamTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="冷力(能源)" class-label-unit="MWh" class-name="coolingTwo" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.coolingTwo"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="购买的商品及服务" class-label-unit="吨CO2e" class-name="purchased" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.purchased"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="与燃料和能源消耗相关的活动" class-label-unit="吨CO2e" class-name="activities" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.activities"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="上游交通及分配数量" class-label-unit="吨CO2e" class-name="upTransportation" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.upTransportation"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="下游交通及分配数量" class-label-unit="吨CO2e" class-name="downTransportation" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.downTransportation"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="运行中产生的废弃物" class-label-unit="吨CO2e" class-name="waste" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.waste"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="员工差旅" class-label-unit="吨CO2e" class-name="employeeTravel" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.employeeTravel"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="员工通勤" class-label-unit="吨CO2e" class-name="employeeCommuting" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.employeeCommuting"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="范围3的现场运输" class-label-unit="吨CO2e" class-name="onsiteTransport" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.onsiteTransport"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="二氧化碳3" class-label-unit="公吨CO2e" class-name="carbonDioxideThree" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.carbonDioxideThree"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="甲烷3" class-label-unit="公吨CO2e" class-name="methaneThree" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.methaneThree"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="一氧化二氮3" class-label-unit="公吨CO2e" class-name="nitrousOxideThree" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.nitrousOxideThree"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="全氟化碳3" class-label-unit="公吨CO2e" class-name="perfluorocarbonsThree" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.perfluorocarbonsThree"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="氢氟碳化物3" class-label-unit="公吨CO2e" class-name="hydrofluorocarbonsThree" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.hydrofluorocarbonsThree"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="六氟化硫3" class-label-unit="公吨CO2e" class-name="sulfurHexafluorideThree" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.sulfurHexafluorideThree"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="三氟化氮3" class-label-unit="公吨CO2e" class-name="nitrogenTrifluorideThree" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.nitrogenTrifluorideThree"
                    v-on:changeFromData="changeFromDataF($event)"/>

        <from-input class-label="范围1的生物源排放" class-label-unit="公吨CO2e" class-name="biongenicEmissions" backgroundColor="#155E79" color="#FFFFFF"
                    :from-data="data.biongenicEmissions"
                    v-on:changeFromData="changeFromDataF($event)"/>

      </el-form>
      <div style="padding-left: 15px;padding-right: 15px;">
        <el-row :gutter="10" style="height: 0px;">
          <el-col :span="12">
            <el-table v-loading="loading" :data="customerEmissionsList" @selection-change="handleSelectionChange" border>
              <el-table-column width="55" type="index" label="序号" align="center"/>
              <el-table-column label="客户名称" align="center" prop="customer" />
              <el-table-column label="范围1" align="center" prop="scopeOne" />
              <el-table-column label="范围2" align="center" prop="scopeTwo" />
              <el-table-column label="范围3-购买的商品和服务" align="center" prop="scopeThreeBuy" />
              <el-table-column label="范围3-上游交通及分配" align="center" prop="scopeThreeTransportation" />
              <el-table-column label="范围3-运行中产生的废弃物" align="center" prop="scopeThreeWaste" />
              <el-table-column label="范围1、2、3" align="center" prop="scopeSum" />
            </el-table>
          </el-col>

          <el-col :span="12">
            <el-table v-loading="loading" :data="productEmissionsList" @selection-change="handleSelectionChange" border>
              <el-table-column width="55" type="index" label="序号" align="center"/>
              <el-table-column label="产品" align="center" prop="product" />
              <el-table-column label="吨CO2e" align="center" prop="metricTonnesCo2e" />
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { listResult, getResult, delResult, addResult, updateResult, exportResult } from "@/api/result/resultYear";
import { listCustomerEmissions } from "@/api/result/customerEmissions";
import { listProductEmissions } from "@/api/result/productEmissions";
import FromInput from '../common/FromInput';

export default {
  name: "Result",
  components: {
    FromInput
  },
  props:{
    enterpriseId:{
      type: Number,
      required:true,
    }
  },
  data() {
    return {
      data:{

      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 结果表格数据
      resultList: [],
      customerEmissionsList: [],
      productEmissionsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        infoId: this.enterpriseId,
        carbonDioxideOne: null,
        methaneOne: null,
        nitrousOxideOne: null,
        perfluorocarbonsOne: null,
        hydrofluorocarbonsOne: null,
        sulfurHexafluorideOne: null,
        nitrogenTrifluorideOne: null,
        carbonDioxideTwo: null,
        methaneTwo: null,
        nitrousOxideTwo: null,
        perfluorocarbonsTwo: null,
        hydrofluorocarbonsTwo: null,
        sulfurHexafluorideTwo: null,
        nitrogenTrifluorideTwo: null,
        combustion: null,
        vehicles: null,
        fugitiveEmissions: null,
        inboundLogistics: null,
        outboundLogistics: null,
        businessTravel: null,
        electricity: null,
        heat: null,
        steam: null,
        cooling: null,
        fuel: null,
        electricityTwo: null,
        heatTwo: null,
        steamTwo: null,
        coolingTwo: null,
        purchased: null,
        activities: null,
        upTransportation: null,
        downTransportation: null,
        waste: null,
        employeeTravel: null,
        employeeCommuting: null,
        onsiteTransport: null,
        carbonDioxideThree: null,
        methaneThree: null,
        nitrousOxideThree: null,
        perfluorocarbonsThree: null,
        hydrofluorocarbonsThree: null,
        sulfurHexafluorideThree: null,
        nitrogenTrifluorideThree: null,
        biongenicEmissions: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询结果列表 */
    getList() {
      this.loading = true;
      listResult(this.queryParams).then(response => {
        this.resultList = response.rows;
        this.total = response.total;
        this.loading = false;
      }),
        listCustomerEmissions(this.queryParams).then(response => {
          this.customerEmissionsList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
      listProductEmissions(this.queryParams).then(response => {
        this.productEmissionsList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
      ;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        infoId: this.enterpriseId,
        carbonDioxideOne: null,
        methaneOne: null,
        nitrousOxideOne: null,
        perfluorocarbonsOne: null,
        hydrofluorocarbonsOne: null,
        sulfurHexafluorideOne: null,
        nitrogenTrifluorideOne: null,
        carbonDioxideTwo: null,
        methaneTwo: null,
        nitrousOxideTwo: null,
        perfluorocarbonsTwo: null,
        hydrofluorocarbonsTwo: null,
        sulfurHexafluorideTwo: null,
        nitrogenTrifluorideTwo: null,
        combustion: null,
        vehicles: null,
        fugitiveEmissions: null,
        inboundLogistics: null,
        outboundLogistics: null,
        businessTravel: null,
        electricity: null,
        heat: null,
        steam: null,
        cooling: null,
        fuel: null,
        electricityTwo: null,
        heatTwo: null,
        steamTwo: null,
        coolingTwo: null,
        purchased: null,
        activities: null,
        upTransportation: null,
        downTransportation: null,
        waste: null,
        employeeTravel: null,
        employeeCommuting: null,
        onsiteTransport: null,
        carbonDioxideThree: null,
        methaneThree: null,
        nitrousOxideThree: null,
        perfluorocarbonsThree: null,
        hydrofluorocarbonsThree: null,
        sulfurHexafluorideThree: null,
        nitrogenTrifluorideThree: null,
        biongenicEmissions: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加结果";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getResult(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改结果";
      });
    },
    changeFromDataF(data) {
      this.data[data.name] = Number(data.value);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateResult(this.form).then(response => {
              if (response.code === '200') {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addResult(this.form).then(response => {
              if (response.code === '200') {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除结果编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delResult(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有结果数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportResult(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    }
  }
};
</script>
<style scoped lang="scss">
  .resultYear {
    width: 100%;
    height: 100%;
  }
  .dialog-footer {
    text-align: right;
  }
  
  .el-table {
    height: 100%;
    width: 100%;
  }
</style>